<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="movie-header">
                    <span>休闲娱乐</span>
                    <span>ktv / 足浴按摩  / 轰趴馆 / 运动健身&nbsp;&nbsp;&nbsp;&nbsp; <span class="all">查看全部 <span class="iconfont">&#xe625;</span></span></span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <ul>
                    <li v-for="(item,index) of list" :key="index">
                        <img :src="item.src" >
                        <span class="center">{{item.content}}</span>
                        <div class="comments">
                            <span class="comment">{{item.comments}}</span>
                        </div>
                        
                        <div class="park">
                            <span>{{item.park}}</span>
                            <span>{{item.sell}}</span>
                        </div>
                        <span class="nothing">{{item.nothing}}</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'HomePlay',
    data() {
        return {
            list: [{src: '//gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop%3D0%2C0%2C800%2C598%3Bw%3D640%3Bq%3D84/sign=317c7a5800338744888a753c6c3ff5c9/d50735fae6cd7b8959091e8b032442a7d9330e54.jpg',
            content: 'A&F水弹枪俱乐部(徐家汇店)',
            comments: '暂无评论',
            park: '顾村公园',
            sell: '已售36',
            nothing: '暂无'},
            {src: 'https://ss0.bdstatic.com/7LsWdDW5_xN3otebn9fN2DJv/bainuo/wh%3D690%2C460%3Bq%3D90%3Bc%3Dnuomi%2C95%2C95/sign=d12f01bb8826cffc697fb7b4803166a4/32fa828ba61ea8d39b7503269d0a304e251f58b8.jpg',
            content: '顾村公园·国际彩弹射击中心',
            comments: '暂无评论',
            park: '肇嘉浜路沿线',
            sell: '已售580',
            nothing: '暂无'},
            {src: '//gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop%3D0%2C35%2C1124%2C680%3Bw%3D720%3Bq%3D80/sign=db636ecba4af2eddc0be13a9b0202dda/dcc451da81cb39db1b97779bd8160924aa1830a3.jpg',
            content: '行之堂足道养生馆',
            comments: '暂无评论',
            park: '五角场',
            sell: '已售44',
            nothing: '暂无'},
            {src: '//gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop%3D0%2C58%2C800%2C484%3Bw%3D720%3Bq%3D99/sign=39b5b7cb474a20a425516687ad62b417/37d3d539b6003af3402433b93d2ac65c1138b649.jpg',
            content: '品度斯诺克',
            comments: '暂无评论',
            park: '老闵行',
            sell: '已售456',
            nothing: '暂无'},{
            src: '//gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/bainuo/crop%3D0%2C46%2C640%2C388%3Bw%3D470%3Bq%3D99/sign=462faa500246f21fdd7b0413cb144754/cb8065380cd79123063870dfa5345982b3b78045.jpg',
            content: '自由人真人CS',
            comments: '暂无评论',
            park: '古北',
            sell: '已售487',
            nothing: '暂无'}]
        }
    }
}
</script>

<style lang="stylus" scoped>
    .movie-header
        display: flex;
        justify-content: space-between;
        span:nth-child(1)
            font-weight: 550;
            font-size: 20px;
            margin-left: 143px;
            margin-top: 36px
        span:nth-child(2)
            // margin-right: 30px;
            margin-top: 40px;
            font-size: 13px;
            &:hover
                cursor: pointer;
            .all
                margin-right: 150px;
                font-size: 14px;
                font-weight: normal;
                .iconfont
                    margin-left: 0;
                    color: #aaa;
                    position: relative;
                    top: 1px;
                    right: 3px;
                    font-size: 15px;
    ul
        width: 1260px;
        height: 320px;
        display: inline-block;
        margin-left: 80px;
        border-bottom: 1px solid #eee;
        li
            list-style-type: none;
            display: inline-block;
            width: 222px;
            height: 274px;
            padding: 15px;
            &:hover
                box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
            img
                width: 222px;
                height: 155px;
                margin-bottom: 15px;
            .center
                width:100%;
                height: 22px;
                dispaly: block;
                font-size: 18px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overfow: hidden;
            .comments
                display: flex;
                flex-direction: row-reverse;
                margin-top: 5px;
                .comment
                    width: 56px;
                    height: 16.7px;
                    display: block;
                    font-size: 14px;
                    color: #666;
            .park
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 10px;
                span
                    font-size: 14px;
                    color: #666;
            .nothing
                display: block;
                margin-top: 5px;
                font-size: 14px;
                color: #666;
          
</style>


